<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="count++">累加</button>
    <br />
    <button @click="destroy">卸载组件</button>
    <Header :count='count'/>
  </div>
</template>

<script>
import Header from './components/Header'

export default {
  name: "App",
  components:{
    Header,
  },
  data() {
    return {
      count: 1,
    };
  },

  methods:{
    destroy(){
      this.$destroy()
    }
  },

  /* 
    父子组件生命周期流程：
    - 初始化流程
      父组件的beforeCreate --》父组件的created --》父组件的beforeMount
      --》子组件的beforeCreate --》子组件的created --》子组件的beforeMount
      --》子组件的mounted --》父组件mounted

    - 更新流程
     - 当子组件没有用到父组件数据的时候，父组件更新，子组件不会触发任何更新
     - 当子组件用到父组件的数据时，父组件beforeUpdate-->子组件beforeUpdate-->子组件updated-->父组件updated


    - 卸载流程
     - 父组件beforeDestroy-->子组件beforeDestroy-->子组件destroyed-->父组件destroyed
  
  */


// new Vue 之后，先初始化事件系统和生命周期系统，数据等都还没有放在实例上
  beforeCreate() {
    console.log('----beforeCreate----');

  },

// 在created之前，拿到了data，并放在实例上，进行了数据代理和数据劫持的操作

// beforeCreate 和 created 中创建前和创建后的创建指的是：_data数据的创建和数据代理、数据劫持的创建
  created() {
    console.log('----created----');

  },

// 在挂载（虚拟DOM转为真实DOM并渲染在浏览器中）之前 ，浏览器中展示的还是容器中没有经过Vue编译的DOM结构，这个DOM结构和Vue没有任何关系
// 在脚手架中的index.html的容器app中添加一些文字即可看见效果
// 在这个阶段所有操作DOM都不生效，因为我们在Vue中操作的是Vue生成的DOM，而不是模板中的DOM，模板中的DOM迟早要被替换
  beforeMount(){
    console.log('----beforeMount----');

  },

// mounted 之前，Vue根据虚拟DOM创建好了真实DOM，并且替换掉了el容器
// 在这个阶段，我们会做所有的初始化操作 --- 开启定时器、发送初始化请求、发起订阅、绑定自定义事件等等
  mounted() {
    console.log('----mounted----');

  },


// beforeUpdate触发条件：数据已经修改，但视图还没有更新
// 得到的数据和视图展示的数据不一致
  beforeUpdate() {
       console.log('----beforeUpdate----');

  },

// 在updated执行之前，vue已经根据新的数据重新渲染得到了一个新的虚拟DOM，然后根据diff算法，修改了真实DOM
// 此时数据和视图已经保持一致了
  updated() {
        console.log('----updated----');

  },


// 当组件收到销毁指令时，会调用beforeDestory函数
// 在当前不要再修改数据了，无用
// 在这个生命周期中一般用来处理收尾工作 --- 关闭定时器，取消订阅，解绑自定义事件等等
  beforeDestroy() {
      console.log('----beforeDestroy----');

  },

// 在destroyed之前，vue取消了观察（数据双向绑定），并把子组件内部的事件等都拆卸了
// 但是在destroyed中还是可以访问vm的，只不过是切断了vm与视图之间的联系
  destroyed() {
        console.log('----destroyed----');

  },

  


};
</script>

<style>
</style>